<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/header.jsp" %>
			<div class="row" style="">
				<div class="col-xs-12">
					<div class="widget-box">
						<div class="widget-header widget-header-blue widget-header-flat">
							<h4 class="widget-title lighter">代码生成引擎使用向导</h4>
						</div>
						<div class="widget-body">
							<div class="widget-main" style="overflow-x:auto;">
								<!-- #section:plugins/fuelux.wizard -->
								<div id="fuelux-wizard-container" style="width:1600px;">
									<div>
										<!-- #section:plugins/fuelux.wizard.steps -->
										<ul class="steps">
											<li data-step="1" class="active">
												<span class="step">1</span>
												<span class="title">选择表</span>
											</li>

											<!-- <li data-step="2">
												<span class="step">2</span>
												<span class="title">选择列</span>
											</li> -->

											<li data-step="3">
												<span class="step">2</span>
												<span class="title">定义列属性</span>
											</li>

											<li data-step="4">
												<span class="step">3</span>
												<span class="title">生成代码</span>
											</li>
										</ul>

										<!-- /section:plugins/fuelux.wizard.steps -->
									</div>

									<hr />

									<!-- #section:plugins/fuelux.wizard.container -->
									<div class="step-content pos-rel">
										<form class="form-horizontal" id="generatorForm">
											<div class="step-pane active" data-step="1">
												<div class="form-group">
													<label for="table-select" class="col-xs-12 col-sm-3 control-label no-padding-right">选择表</label>
													<div class="col-xs-12 col-sm-5">
														<select class="chosen-select form-control" name="tableName" id="table-select" data-placeholder="选择一张表..." required>
															<option value="">  </option>
															<c:forEach var="table" items="${tables}">
																<option value="${table.sqlName}" title="${table.remarks}">${table.sqlName}</option>
															</c:forEach>
														</select>
													</div>
												</div>
												<br/>
												<div class="hide" id="moreTableDetail">
													<div class="form-group">
														<label for="table-name" class="col-xs-12 col-sm-3 control-label no-padding-right">实体名</label>
														<div class="col-xs-12 col-sm-5">
															<input type="text" id="className" name="className" class="col-xs-5" title="控制生成的pojo类名称，请填写符合java命名规范的名称，特别是多单词的表名。e.g. MYTEST -> MyTest,带有下划线的表名将自动转化 e.g. HW_DEMO -> HwDemo   "/>
														</div>
													</div>
													
													<div class="form-group">
														<label for="table-name" class="col-xs-12 col-sm-3 control-label no-padding-right">添加组件</label>
														<div class="col-xs-12 col-sm-5">
															<div class="radio">
																<label>
																	<input name="selectBox" value="checkbox" class="ace ace-radio-2" type="radio" />
																	<span class="lbl">复选框</span>
																</label>
																<label>
																	<input name="selectBox" value="radio" class="ace ace-radio-2" type="radio" />
																	<span class="lbl">单选框</span>
																</label>
																<label>
																	<input name="actionBtn" class="ace ace-checkbox-2" type="checkbox" />
																	<span class="lbl">操作按钮</span>
																</label>
															</div>
														</div>
													</div>
												</div>
											</div>
										</form>
										<!-- <div class="step-pane" data-step="2" id="step2" style="height:0px;padding-bottom:30%">
											
										</div> -->

										<div class="step-pane" data-step="3" id="step3" style="">
											
										</div>

										<div class="step-pane" data-step="4" id="step4">
											<div class="alert alert-success">
												<button type="button" class="close" data-dismiss="alert">
													<i class="ace-icon fa fa-times"></i>
												</button>
		
												<strong>
													<i class="ace-icon fa fa-check"></i>
													设置成功!
												</strong>
		
												点击【生成代码】来生成文件，生成成功后自动打开设置的输出路径。。。。
												<br />
											</div>
										</div>
									</div>

									<!-- /section:plugins/fuelux.wizard.container -->
								</div>

								<hr />
								<div class="wizard-actions">
									<!-- #section:plugins/fuelux.wizard.buttons -->
									<button class="btn btn-prev">
										<i class="ace-icon fa fa-arrow-left"></i>
										上一步
									</button>

									<button class="btn btn-success btn-next" data-last="生成代码">
										下一步
										<i class="ace-icon fa fa-arrow-right icon-on-right"></i>
									</button>

									<!-- /section:plugins/fuelux.wizard.buttons -->
								</div>

								<!-- /section:plugins/fuelux.wizard -->
							</div><!-- /.widget-main -->
						</div><!-- /.widget-body -->
					</div>

					<div id="modal-wizard" class="modal">
						<div class="modal-dialog">
							<div class="modal-content">
								<div id="modal-wizard-container">
									<div class="modal-header">
										<ul class="steps">
											<li data-step="1" class="active">
												<span class="step">1</span>
												<span class="title">Validation states</span>
											</li>

											<li data-step="2">
												<span class="step">2</span>
												<span class="title">Alerts</span>
											</li>

											<li data-step="3">
												<span class="step">3</span>
												<span class="title">Payment Info</span>
											</li>

											<li data-step="4">
												<span class="step">4</span>
												<span class="title">Other Info</span>
											</li>
										</ul>
									</div>

									<div class="modal-body step-content">
										<div class="step-pane active" data-step="1">
											<div class="center">
												<h4 class="blue">Step 1</h4>
											</div>
										</div>

										<div class="step-pane" data-step="2">
											<div class="center">
												<h4 class="blue">Step 2</h4>
											</div>
										</div>

										<div class="step-pane" data-step="3">
											<div class="center">
												<h4 class="blue">Step 3</h4>
											</div>
										</div>

										<div class="step-pane" data-step="4">
											<div class="center">
												<h4 class="blue">Step 4</h4>
											</div>
										</div>
									</div>
								</div>

								<div class="modal-footer wizard-actions">
									<button class="btn btn-sm btn-prev">
										<i class="ace-icon fa fa-arrow-left"></i>
										Prev
									</button>

									<button class="btn btn-success btn-sm btn-next" data-last="Finish">
										Next
										<i class="ace-icon fa fa-arrow-right icon-on-right"></i>
									</button>

									<button class="btn btn-danger btn-sm pull-left" data-dismiss="modal">
										<i class="ace-icon fa fa-times"></i>
										Cancel
									</button>
								</div>
							</div>
						</div>
					</div><!-- PAGE CONTENT ENDS -->
				</div><!-- /.col -->
			</div><!-- /.row -->

<script type="text/javascript">
var scripts = [null, null];
$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
	
	$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
		_title: function(title) {
			var $title = this.options.title || '&nbsp;'
			if( ("title_html" in this.options) && this.options.title_html == true )
				title.html($title);
			else title.text($title);
		}
	})); 
	
	var oldVal;
	var flag = true;//控制前一步之后，再点下一步是否刷新页面,true是刷新
	
	$('#generatorForm').validate({
		errorElement: 'div',
		errorClass: 'help-block',
		focusInvalid: false,
		ignore: ":hidden:not(select)",
		rules: {
			
		},
	
		messages: {
			
		},
	
		submitHandler: function (form) {
		},
		invalidHandler: function (form) {
		}
	});
	
	$("#className").tooltip({
		show: {
			effect: "slideDown",
			delay: 250
		}
	});
	
	var selecedTable;
	$('.chosen-select').chosen({
		allow_single_deselect:true,
		search_contains:true,
		no_results_text:"没有匹配结果",
		include_group_label_in_selected:true
	}).change(function(event,obj){
		if(obj != undefined && obj.selected != ""){
			$("#table-select-error").remove();
			$("div").removeClass("has-error");
		}
		selecedTable = obj.selected;
		$("#moreTableDetail input[type=text]").val("");
		$("#moreTableDetail input[type=radio]").attr("checked",false);
		$("#moreTableDetail input[type=checkbox]").attr("checked",false);
		$("#moreTableDetail").removeClass("hide");
	})/* .on("chosen:showing_dropdown",function(a,b,c){
		debugger;
		alert(11111);
	}) */;
	
	$('#modal-wizard-container').ace_wizard();
	$('#modal-wizard .wizard-actions .btn[data-dismiss=modal]').removeAttr('disabled');
	
	$('#fuelux-wizard-container').ace_wizard({
		//step: 2 //optional argument. wizard will jump to step "2" at first
		//buttons: '.wizard-actions:eq(0)'
	})
	.on('actionclicked.fu.wizard' , function(e, info){
		
		if(info.direction == "previous"){
			flag = false;
		}
		
		if(info.direction == 'next'){
			//debugger;
			if(!$('#generatorForm').valid()) 
				return false;
			
			if(oldVal == null || oldVal == ""){
				oldVal = $("#table-select").val();
			}
			
			if(oldVal == $("#table-select").val() && !flag){
				return true;
			}else{
				oldVal = $("#table-select").val();
			}
			
			
			/* if(info.step == '1'){
				$("#step2").empty();
				$("#step2").load("${ctx}/generator/getColumns.do",{"tableName":selecedTable});
			} */
			if(info.step == '1'){
			   /*  if($('[name="columns"]').val() == null){
			    	alert("请选择列！");
			    	return false;
			    	
			    } */
			    $("#step3").empty();
			    $("#step3").load("${ctx}/generator/definedColumnProperty.do",{"tableName":selecedTable});  
			}
			if(info.step == '3'){
				//alert(4);
			}
		}
	})
	.on('finished.fu.wizard', function(e) {
		//debugger;
		$("#generatorForm").serialize();
		$("#columnsFrom").serialize();
		$("#columnPropertyForm").serialize();
		$.post("${ctx}/generator/generateCode.do",$("#generatorForm").serialize()+"&"+$("#columnsFrom").serialize()+"&"+$("#columnPropertyForm").serialize(),function(result){
			alert(result);
		});
		/* bootbox.dialog({
			message: "正在生成代码，请稍后。。。", 
			buttons: {
				"success" : {
					"label" : "OK",
					"className" : "btn-sm btn-primary"
				}
			}
		}); */
	}).on('stepclick.fu.wizard', function(e){
		//e.preventDefault();//this will prevent clicking and selecting steps
	});
	
})





</script>